<template>
  <q-page padding>

    <div class="tw-grid tw-grid-cols-3">
      <div>
        <q-select v-model="gov" label="决策者角色" :options="gov_options"/>
      </div>
      <div>
        <q-select v-model="choice" label="水资源配置策略" :options="decision"/>
      </div>
      <div >
        <q-btn class="tw-m-4" color="primary" label="决策" @click="search()"/>
      </div>
    </div>
    <div class="tw-flex ">
      <div class="tw-flex-none ">
        <div class="tw-text-2xl tw-mt-2">
          目标案例
        </div>
        <q-markup-table separator="cell" class="tw-mt-5 tw-h-full">
          <thead>
          <tr>
            <th class="text-left"></th>
            <th class="text-left">特征属性</th>
            <th class="text-left">数值</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td class="text-left q-td--no-hover cell-border cell-left cell-top" rowspan="4">基础信息</td>
            <td class="text-left cell-left">干旱类型</td>
            <td class="text-left">
              <q-input v-model="data.type"/>
            </td>
          </tr>
          <tr>
            <td class="text-left ">开始时间</td>
            <td class="text-left">
              <q-input v-model="data.start"/>
            </td>

          </tr>
          <tr class="text-left">
            <td class="text-left">结束时间</td>
            <td class="text-left">
              <q-input v-model="data.end"/>
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">发生省份</td>
            <td class="text-left">
              <q-input v-model="data.province"/>
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left q-td--no-hover cell-border cell-left cell-top" rowspan="4">气象信息</td>
            <td class="text-left cell-left">降水量</td>
            <td class="text-left">
              <q-input v-model="data.rain"/>
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">温度</td>
            <td class="text-left">
              <q-input v-model="data.temp"/>
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">风速</td>
            <td class="text-left">
              <q-input v-model="data.wind"/>
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">相对湿度</td>
            <td class="text-left">
              <q-input v-model="data.moist"/>
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left q-td--no-hover cell-border cell-left cell-top" rowspan="3">干旱指标信息</td>
            <td class="text-left cell-left">SPI</td>
            <td class="text-left">
              <q-input v-model="data.SPI"/>
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">MCI</td>
            <td class="text-left">
              <q-input v-model="data.MCI"/>
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">干旱烈度</td>
            <td class="text-left">
              <q-input v-model="data.dry"/>
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left q-td--no-hover cell-border cell-left cell-top" rowspan="3">社会经济信息</td>
            <td class="text-left cell-left">GDP</td>
            <td class="text-left">
              <q-input v-model="data.gdp"/>
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">人口</td>
            <td class="text-left">
              <q-input v-model="data.popular"/>
            </td>
          </tr>
          </tbody>
        </q-markup-table>
      </div>
      <q-separator vertical class="tw-m-10 "/>
      <div v-if="vis" class="tw-flex-2">
        <div class="tw-text-2xl tw-mt-2">
          决策结果
        </div>
        <q-markup-table separator="cell" style="table-layout: fixed" class="tw-mt-2">
          <tbody>
          <tr>
            <td class="text-left q-td--no-hover cell-border cell-left cell-top"   rowspan="2">基本信息</td>
            <td class="text-left cell-left">省份</td>
            <td class="text-left">{{ result.province }}</td>
          </tr>
          <tr>
            <td class="text-left ">年份</td>
            <td class="text-left">{{ result.year }}</td>
          </tr>
          <tr class="text-left">
            <td class="text-left cell-border cell-left cell-top" rowspan="3">应急策略</td>
            <td class="text-left cell-left">响应等级</td>
            <td class="text-left">{{ result.responseLevel }}</td>
          </tr>
          <tr class="text-left">
            <td class="text-left">投资资金</td>
            <td class="text-left">{{ result.fund }}</td>
            <td class="text-left"></td>
          </tr>


          <tr class="text-left">
            <td class="text-left">
              针对{{gov}}应急策略
            </td>
            <td class="text-left  tw-whitespace-normal tw-break-words">
              {{ result.decision }}
            </td>
          </tr>

          <tr class="text-left">
            <td class="text-left q-td--no-hover cell-border cell-left cell-top" rowspan="3">长期策略</td>
            <td class="text-left cell-left">危险性</td>
            <td class="text-left  tw-whitespace-normal tw-break-words">
              {{ result.danger }}
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">脆弱性</td>
            <td class="text-left tw-whitespace-normal tw-break-words">
              {{ result.fragile }}
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">暴露度</td>
            <td class="text-left tw-whitespace-normal tw-break-words">
              {{ result.expose }}
            </td>
          </tr>

          <tr class="text-left">
            <td class="text-left q-td--no-hover cell-border cell-left cell-top" rowspan="5">高风险区</td>
            <td class="text-left cell-left">城市名称</td>
            <td class="text-left">{{ result.city }}</td>
          </tr>
          <tr class="text-left">
            <td class="text-left">农业用水</td>
            <td class="text-left">{{ result.agriculture }}</td>
          </tr>
          <tr class="text-left">
            <td class="text-left">工业用水</td>
            <td class="text-left">{{ result.industry }}</td>
          </tr>
          <tr class="text-left">
            <td class="text-left">生活用水</td>
            <td class="text-left">{{ result.life }}</td>
            <td></td>
          </tr>
          <tr class="text-left">
            <td class="text-left">生态用水</td>
            <td class="text-left">{{ result.ecology }}</td>

          </tr>
          </tbody>
        </q-markup-table>
      </div>
    </div>


    <q-dialog v-model="seamless" seamless position="bottom">
      <q-card style="width: 350px">
        <q-card-section class="row items-center no-wrap">
          <div>
            <div>与历史案例库中案例最高相似度 75.5%，是否保存案例？</div>
          </div>

          <q-btn flat round icon="done" />
          <q-btn flat round icon="close" v-close-popup />
        </q-card-section>
      </q-card>
    </q-dialog>
  </q-page>
</template>

<script setup>

import {ref} from "vue";
import {useQuasar} from "quasar";
import { api } from "src/boot/api";


let gov = ref("政府部门")
let gov_options = ref(["政府部门", "普通人群"])

let choice = ref("社会效益")
let decision = ref(["经济效益", "生态效益", "社会效益"])

let vis = ref(false)
let confirm = ()=>{
  setTimeout(()=>{
    vis.value = true
  },2000)
}
let data = {
  type: ref(12334),
  start: ref("2019-04-23"),
  end: ref("2019-07-16"),
  province: ref("云南"),
  rain: ref(4.1),
  temp: ref(19.22),
  wind: ref(2.51),
  moist: ref(68.61),
  SPI: ref(-1.21),
  MCI: ref(-1.33),
  dry: ref(11.02),
  gdp: ref(2.3),
  popular: ref(48.58),
  seamless: ref(false)
};
let result = ref({
  province: "云南",
  year: 2019,
  responseLevel: "Ⅳ级",
  fund: 100000000,
  decision: "加强水利基础设施建设、实施跨流域调水工程、普及雨水集蓄利用技术，推广农业节水技术、完善农牧地基础设施建设、发展节水灌溉、提高用水效率",
  danger :"加强水利加强水利基础设施建设、实施跨流域调水工程、普及雨水集蓄利用技术，推广农业节水技术、完善农牧地基础设施建设、发展节水灌溉、提高用水效率",
  fragile:'fragile',
  expose:'expose lorum ipsum ',
  city:'普洱市',
  agriculture: 6.74,
  industry: 0.53,
  life: 1.2462,
  ecology: 0.058,
})

let seamless = ref(false)
const $q = useQuasar();

let search = ()=>{
  // convert data to formData 
  let formData = new FormData()
  for(let key in data){
    formData.append(key, data[key].value)
  }
  formData.append('role', gov.value)
  formData.append('choice', choice.value)
  api({
    url:'/decision',
    method:'post',
    data:formData
  }).then(res=>{
    result.value = res.data.data
  })
  vis.value = true

}

</script>
